<template>
  <el-table
    class="jzt-table"
    :data="_tableData"
    :cell-class-name="setCellClassName"
    :span-method="spanMethod"
    border
    style="width: 100%"
  >
    <template #empty>
      <div>
        <el-empty description="这里暂时什么都没有" />
      </div>
    </template>
    <el-table-column prop="categoryName" label="分类" />
    <el-table-column prop="totalClientPrice" label="正价合计金额">
      <template #default="{ row }">
        <p>¥{{ row.totalClientPrice }}</p>
      </template>
    </el-table-column>
    <el-table-column prop="totalClientPreferentialPrice" label="特价合计金额">
      <template #default="{ row }">
        <p>¥{{ row.totalClientPreferentialPrice }}</p>
      </template>
    </el-table-column>
    <el-table-column prop="totalMoney" label="单项合计金额">
      <template #default="{ row }">
        <p>¥{{ row.totalMoney }}</p>
      </template>
    </el-table-column>
    <el-table-column prop="totalMoney" label="总金额">
      <template #default="{ row }">
        <p class="total-price f18 jzt-flex-start" style="font-weight: bold">
          <span>¥</span>
          <el-statistic :value="Number(row.allTotal)" />
          <span v-if="String(row?.allTotal)?.includes('.')">.{{ String(row?.allTotal)?.split(".")[1] }}</span>
          <span v-else>.00</span>
        </p>
      </template>
    </el-table-column>
  </el-table>
</template>

<script setup>
import { ref, computed } from "vue";

const props = defineProps({
  tableData: {
    type: Array,
    default: () => []
  }
});
const _tableData = computed(() => {
  //软装-汇总明细-前端累加计算“总金额”allTotal
  const Total = props.tableData?.reduce((pre, cur) => {
    return Number(pre) + Number(cur.totalMoney);
  }, 0);
  const Arr = props.tableData?.map(item => {
    return {
      ...item,
      allTotal: Total
    };
  });
  return Arr;
});

const setCellClassName = ({ row, column, rowIndex, columnIndex }) => {
  if (columnIndex === 0) {
    return "gray";
  }
};

const spanMethod = ({
  row, // 行
  column, // 列
  rowIndex, // 行索引
  columnIndex // 列索引
}) => {
  if (columnIndex === 0) {
    // return setTableRowCol(row, rowIndex, ["id"]);
  } else if (columnIndex === 4) {
    return setTableRowCol(row, rowIndex, ["amount3"]);
  }
};

/**
 * 合并行
 * @param {*} row
 * @param {*} rowIndex
 * @param {*} keys
 */
const setTableRowCol = (row, rowIndex, keys) => {
  let firstIndex = 0,
    rowspan = 1,
    colspan = 1;
  // 找到需要合并的行的下标
  firstIndex = _tableData.value.findIndex(item => {
    return filterSameKeys(item, row, keys);
  });
  if (rowIndex === firstIndex) {
    // 需要合并的行数
    rowspan = _tableData.value.filter(item => {
      return filterSameKeys(item, row, keys);
    }).length;
    colspan = 1;
  } else {
    // 被合并的行需要设置成0
    rowspan = 0;
    colspan = 0;
  }
  return {
    rowspan,
    colspan
  };
};
// 根据keys数组所有字段去做合并
const filterSameKeys = (item, row, keys) => {
  const _item = JSON.parse(JSON.stringify(item));
  let flag = true;
  keys.forEach(key => {
    flag = flag && _item[key] === row[key];
  });
  return flag;
};
</script>

<style lang="scss" scoped>
:deep(.gray.el-table__cell) {
  background-color: #ebeef1 !important;
}
:deep(.total-price) {
  color: #3d3d3d;
  .el-statistic__content {
    font-size: 18px;
    color: #3d3d3d;
    font-weight: bold;
  }
}
</style>
